<!DOCTYPE html>
<html>
<head>
	<title>3DTest</title>
</head>
<style>
.front{
	width: 200px;
	height: 200px;
	background: red;
	position: absolute;
	z-index: 5;
}
.back{
	width: 200px;
	height: 200px;
	background: blue;
	position: absolute;
	transform: rotateY(180deg);
	z-index: 5;
}
.container{
	width: 200px;
	height: 200px;
	transition: all 0.8s;
}
.container:hover{
	transform: rotateY(180deg);
}
.container:hover .back{
	z-index: 5;
}
</style>
<body>
<div class="container">
	<div class="back">back</div>
	<div class="front">front</div>
</div>
</body>
</html>